import services from '@/services/demo';
import {
    ActionType,
    FooterToolbar,
    PageContainer,
    ProDescriptions,
    ProDescriptionsItemProps,
    ProTable,
} from '@ant-design/pro-components';
import {Avatar, Button, Divider, Drawer, message} from 'antd';
import React, {useRef, useState} from 'react';
import {authForceLogout, getUserList} from "@/services/demo/UserController";
import OffLineForm from "./components/OffLineForm";
import {Link} from "@@/exports";


const UserList: React.FC<unknown> = () => {
    const [createModalVisible, handleModalVisible] = useState<boolean>(false);
    const [offlineModalVisible, handleOfflineModalVisible] = useState<boolean>(false);
    const [curUser, handleCurUser] = useState<any>({});
    const [stepFormValues, setStepFormValues] = useState({});
    const actionRef = useRef<ActionType>();
    const [row, setRow] = useState<API.UserInfo>();
    const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
    const columns: ProDescriptionsItemProps[] = [
        {
            title: '序号',
            dataIndex: 'index',
            align: "center",
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '用户头像',
            dataIndex: 'faceURL',
            valueType: 'avatar',
            align: "center",
            render: (text) => <Avatar src={text}/>,
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            valueType: 'text',
            align: "center",

        },
        {
            title: '用户ID',
            dataIndex: 'userID',
            valueType: 'text',
            align: "center",
        },
        {
            title: '在线状态',
            dataIndex: 'status',
            align: "center",
            render: (text, record) => {
                if ("-" === text) {
                    return text;
                } else {
                    const onlines = text.singlePlatformToken.map(e => e.platform);
                    return onlines.join("/") + "在线";
                }
            },
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            align: "center",
            render: (_, record) => (
                <>
                  <a
                        onClick={() => {
                            handleCurUser(record);
                            handleOfflineModalVisible(true);
                        }}
                    >
                        强制下线
                    </a>
                    <Divider type="vertical"/>
                    <Link to={`/user_manage/relation_list/${record.userID}`}>关系链</Link>
                </>
            ),
        },
    ];
    return (
        <PageContainer
            header={{
                title: '用户列表',
            }}
        >
            <ProTable<API.UserInfo>
                headerTitle=""
                actionRef={actionRef}
                rowKey="userID"
                search={false}
                request={async (params, sorter, filter) => {
                    let pagination = {
                        pageNumber: params.current,
                        showNumber: params.pageSize,
                        total: 0
                    };
                    const {users, total} = await getUserList(pagination);
                    return {
                        data: users || [],
                        success: true,
                        total: total
                    };
                }}
                pagination={{
                    pageSize: 10,
                    // showSizeChanger: true,
                    onChange: (page) => console.log(page),
                }}
                columns={columns}
                rowSelection={{
                    onChange: (_, selectedRows) => setSelectedRows(selectedRows),
                }}

            />
            {selectedRowsState?.length > 0 && (
                <FooterToolbar
                    extra={
                        <div>
                            已选择{' '}
                            <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>{' '}
                            项&nbsp;&nbsp;
                        </div>
                    }
                >
                   {/* <Button
                        onClick={async () => {
                            await handleRemove(selectedRowsState);
                            setSelectedRows([]);
                            actionRef.current?.reloadAndRest?.();
                        }}
                    >
                        批量删除
                    </Button>
                    <Button type="primary">批量审批</Button>*/}
                </FooterToolbar>
            )}



            {offlineModalVisible ? (
                <OffLineForm
                    user={curUser}
                    offlineModalVisible={offlineModalVisible}
                    cancelOfflineModal={() => handleOfflineModalVisible(false)}
                    offlineModalFinish={async (values, userId) => {
                        const selectKeys = Object.entries(values).filter(([key, value]) => value === true).map(e => e[0]);
                        const all = await Promise.all(selectKeys.map(e => authForceLogout(e, userId)));
                        message.success('操作成功');
                        actionRef.current.reload();
                        return true;
                    }}
                />
            ) : null}

            <Drawer
                width={600}
                open={!!row}
                onClose={() => {
                    setRow(undefined);
                }}
                closable={false}
            >
                {row?.name && (
                    <ProDescriptions<API.UserInfo>
                        column={2}
                        title={row?.name}
                        request={async () => ({
                            data: row || {},
                        })}
                        params={{
                            id: row?.name,
                        }}
                        columns={columns}
                    />
                )}
            </Drawer>
        </PageContainer>
    );
};

export default UserList;
